<template>
    <div>
        <div class="nav-top">
            <van-icon name="arrow-left" style="margin-left: 10px;" @click="()=>{this.$router.push('/user')}"/>
            <h3 style="margin-right: 25px;">个人信息</h3>
            <div></div>
        </div>
        <ul class="nav_box">
            <!--头像-->
            <li @click="show = true">
                <div class="nav-box-li">
                    <span>头像</span>
                    <div class="img">
                        <img style="width: 50px;" :src="userInfo.avatar" alt="">
                    </div>
                </div>
                <van-icon name="arrow"/>
            </li>
            <!--昵称-->
            <li>
                <div class="nav-box-li" @click="gotoSetInfo(1,userInfo.nickname)">
                    <span>昵称</span>
                    <span class="sm">{{userInfo.nickname}}</span>
                </div>
                <van-icon name="arrow"/>
            </li>
            <!--手机号-->
            <li>
                <div class="nav-box-li">
                    <span>手机号</span>
                    <span class="sm">{{userInfo.mobile}}</span>
                </div>
            </li>
            <!--性别-->
            <li>
                <div class="nav-box-li" @click="gotoSetInfo(2,userInfo.sex)">
                    <span>性别</span>
                    <span class="sm">{{userInfo.sex | sex}}</span>
                </div>
                <van-icon name="arrow"/>
            </li>
            <!--出生日期-->
            <li>
                <div class="nav-box-li" @click="dateShow = true">
                    <span>出生日期</span>
                    <span class="sm">{{userInfo.birthday}}</span>
                </div>
                <van-icon name="arrow"/>
            </li>
            <!--所在城市-->
            <li @click="optRegion">
                <div class="nav-box-li">
                    <span>所在城市</span>
                    <span class="sm">{{`${userInfo.province_name}-${userInfo.city_name}-${userInfo.district_name}`}}</span>
                </div>
                <van-icon name="arrow"/>
            </li>
            <!--学科-->
            <li>
                <div class="nav-box-li">
                    <span>学科</span>
                    <span class="sm">{{userInfo.attr | attr}}</span>
                </div>
                <van-icon name="arrow"/>
            </li>
            <!--年级-->
            <li>
                <div class="nav-box-li">
                    <span>年级</span>
                    <span class="sm">{{userInfo.attr[0].attr_value}}</span>
                </div>
                <van-icon name="arrow"/>
            </li>
        </ul>

        <!--选择-->
        <van-action-sheet v-model="show" style="overflow: hidden;">
            <ul class="selectImg">
                <li>
                    手机拍照
                    <input class="inp" type="file" accept="image/*" capture="camera" @change="takePhoto($event)">
                </li>
                <li>
                    手机相册
                    <input class="inp" type="file" accept="image/*" @change="takePhoto($event)">
                </li>
                <li @click="show = false">
                    取消
                </li>
            </ul>
        </van-action-sheet>
        <!--选择生日-->
        <van-popup v-model="dateShow" position="bottom">
            <van-datetime-picker
                    :value="userInfo.birthday | currentDate"
                    type="date"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @confirm="sexchange"
                    @cancel="dateShow = false"
            />
        </van-popup>
        <!--地区选择-->
        <van-popup v-model="regionShow" position="bottom">
            <van-area :value="`${xx}`"
                      :area-list="areaList"
                      @change="optRegions"
                      @confirm="optRegionck"
            />
        </van-popup>
    </div>
</template>

<script>
    import {Toast} from 'vant'
    import moment from 'moment'

    export default {
        name: "Personal",
        data() {
            return {
                dateShow: false,
                show: false,
                regionShow: false,
                minDate: new Date(1900, 0, 1),
                maxDate: new Date(),
                areaList: [],
                sh: "",
                ss: "",
                xx: "",
                shang: ''
            }
        },
        computed: {
            userInfo() {
                return this.$store.state.user.userInfo
            }
        },
        mounted() {
            this.$store.dispatch('getUserinfo')
        },
        methods: {
            back() {
                window.history.back()
            },
            //更换头像
            takePhoto(e) {
                let formData = new FormData()
                formData.append('file', e.target.files[0])
                this.$HTTP.uploadImg(
                    formData
                ).then(res => {
                    console.log(res.data.data.path)

                    if (res.data.code === 200) {
                        this.$HTTP.SetInfo({
                            avatar: res.data.data.path
                        }).then(ress => {
                            if (ress.data.code === 200) {
                                Toast.success('设置成功!')

                                this.$store.dispatch('getUserinfo')
                                this.show = false
                            }
                        })
                    }
                })
            },
            //去修改信息页面
            gotoSetInfo(type, value) {
                this.$router.push({
                    path: "/set-info",
                    query: {
                        type: type,
                        name: value
                    }
                })
            },
            //修改生日
            sexchange(e) {
                this.$store.dispatch('SETINFO', {
                    birthday: moment(e).format("YYYY-MM-DD")
                }).then(res => {
                    this.dateShow = false;
                    if (res === true) {
                        Toast.success('修改成功!')
                    } else if (res === false) {
                        Toast.fail('修改失败!')
                    }
                })
            },
            //修改地址
            optRegion() {
                let sh = this.userInfo.province_name;
                let ssx = this.userInfo.city_name
                let xx = this.userInfo.district_name
                this.regionShow = true

                this.$HTTP.sonArea(0).then(res => {
                    let s = {}

                    res.data.data.map(el => {
                        if (el.area_name === sh) {
                            this.sh = el.id;
                        }
                        s[el.id] = el.area_name;
                    })

                    this.$HTTP.sonArea(this.sh).then(res => {
                        let ss = {}
                        res.data.data.map(el => {
                            if (el.area_name === ssx) {
                                this.ss = el.id;
                            }
                            ss[el.id] = el.area_name;
                        })

                        this.$HTTP.sonArea(this.ss).then(res => {
                            let sss = {}
                            res.data.data.map(el => {
                                if (el.area_name === xx) {
                                    this.xx = el.id;
                                }
                                sss[el.id] = el.area_name;
                            })

                            this.areaList = {
                                province_list: s,
                                city_list: ss,
                                county_list: sss
                            }
                            console.log(this.areaList)
                        })
                    })
                })
            },
            //不断选择中的地址
            optRegions(e, a, b) {

                this.$HTTP.sonArea(a[0].code).then(res => {
                    let ss = {}
                    res.data.data.map(el => {
                        ss[el.id] = el.area_name;
                    })


                    if (a[0].code !== this.shang) {
                        this.$HTTP.sonArea(res.data.data[0].id).then(res => {
                            let sss = {}
                            res.data.data.map(el => {
                                sss[el.id] = el.area_name;
                            })

                            this.areaList.county_list = sss;
                        })
                        this.shang = a[0].code
                    }

                    this.areaList.city_list = ss;
                })

                this.$HTTP.sonArea(a[1].code).then(res => {
                    let sss = {}
                    res.data.data.map(el => {
                        sss[el.id] = el.area_name;
                    })

                    this.areaList.county_list = sss;
                    console.log(this.areaList)
                })
            },
            optRegionck(e) {
                // console.log(this.sh, this.ss, this.xx)
                console.log(e)
                this.$store.dispatch('SETINFO', {
                    province_id: e[0].code,
                    province: e[0].name,
                    city_id: e[1].code,
                    city: e[1].name,
                    district_id: e[2].code,
                    district: e[2].name
                }).then(res => {
                    if (res) {
                        Toast.success('修改成功!')
                        this.regionShow = false
                    }
                })
            }
        },
        filters: {
            currentDate(data) {
                data = data.replace('-', ',')
                data = data.replace('-', ',')

                return new Date(data)
            },
            sex(num) {
                return num === 0 ? '男' : "女"
            },
            attr(arr) {
                let str = '';
                arr.map(el => {
                    str += el.attr_value + ' '
                })

                return str
            }
        },
        watch: {}
    }
</script>

<style scoped lang="scss">

    .van-picker {
        margin-top: 20px;

        /deep/ .van-picker__confirm {
            line-height: 50px;
            font-size: 35px;
            color: #ED6D13;
        }

        /deep/ .van-picker__cancel {
            line-height: 50px;
            font-size: 35px;
            color: #EF7C2C;
        }

        /deep/ .van-picker__title {
            line-height: 50px;
            font-size: 40px;
        }

        /deep/ .van-picker-column {
            font-size: 35px;
        }
    }

    .inp {
        width: 100%;
        right: 0;
        left: 0;
        top: 0;
        position: absolute;
        opacity: 0;
        border: 1px solid red;
    }

    .nav-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 30px;
        height: 87px;
        background: #fff;
        align-items: center;

        h3 {
            font-weight: 300;

        }

        .van-icon {
            font-size: 45px;
        }
    }

    .nav_box {
        width: 100%;
        background: #fff;
        margin: 2.66667vw 0;
        font-size: 30px;

        li {
            width: 92%;
            padding: 0 4%;
            height: 120px;
            align-items: center;
            display: flex;
            justify-content: space-between;
            position: relative;
            border-bottom: .2px solid #eee;
            color: #6c757d;

            .sm {
                font-size: 28px;
            }
        }


        .nav-box-li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 92%;

            .img {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .selectImg {

        li {
            line-height: 120px;
            font-size: 35px;
            text-align: center;
            position: relative;
        }
    }
</style>